<!-- eslint-disable no-undef -->
<script setup lang="ts">
import type { KnowledgeType, KnowledgeList } from '@/types/consult'
import KnowledgeCard from './KnowledgeCard.vue'
import { getKnowledgePage } from '@/services/consult'
const props = defineProps<{
  type: KnowledgeType
}>()
const loading = ref(false) // 控制列表加载数据的布尔值
const finished = ref(false) // 控制列表加载结束的布尔值
const queryParam = ref({ type: props.type, current: 1, pageSize: 10 }) // 查询参数
const list = ref<KnowledgeList>([])
const onLoad = async () => {
  const res = await getKnowledgePage(queryParam.value)
  list.value.push(...res.data.rows)
  // 判断数据是否加载结束
  if (queryParam.value.current >= res.data.pageTotal) {
    finished.value = true
  } else {
    queryParam.value.current++
  }
  loading.value = false
}
</script>

<template>
  <div class="knowledge-list">
    <!-- 1. loading 是控制加载状态的 加载中 list组件会将loading设置为true, 加载完毕后需要手动将loading设置为false
         2. finished 加载完成, 如果没有更多数据了, finished设置为true,  finished-text对应的文本会展示
         3. load事件会自动执行, 如果执行完一次后,请求的数据并没有占满屏幕, 会继续执行load事件吗,触底也会执行load事件
    -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <knowledge-card
        v-for="item in list"
        :key="item.id"
        :item="item"
      ></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
